<template>
  <div class="about" :class="{ 'margin-left': !$store.state.ml }">
    <div class="content-container">
      <div class="search flex1">
        <div><span class="red">*</span> 品牌名称</div>

        <el-input class="input" placeholder="" v-model="input" clearable>
        </el-input>
      </div>
      <!-- 品牌图片 -->
      <div class="flex1 imgpr">
        <span class="img"> 品牌图片 </span>
        <el-upload
          action="https://jsonplaceholder.typicode.com/posts/"
          list-type="picture-card"
          :on-preview="handlePictureCardPreview"
          :on-remove="handleRemove"
        >
          <i class="el-icon-plus"></i>
        </el-upload>
        <el-dialog :visible.sync="dialogVisible">
          <img width="100%" :src="dialogImageUrl" alt="" />
        </el-dialog>
      </div>

      <!-- 品牌列表图片 -->
      <div class="flex1 imgpr">
        <span class="img"> 品牌列表图片 </span>
        <el-upload
          action="https://jsonplaceholder.typicode.com/posts/"
          list-type="picture-card"
          :on-preview="handlePictureCardPreview"
          :on-remove="handleRemove"
        >
          <i class="el-icon-plus"></i>
        </el-upload>
        <el-dialog :visible.sync="dialogVisible">
          <img width="100%" :src="dialogImageUrl" alt="" />
        </el-dialog>
      </div>

      <!-- app专用图片 -->
      <div class="flex1 imgpr">
        <span class="img"> app专用图片 </span>
        <el-upload
          action="https://jsonplaceholder.typicode.com/posts/"
          list-type="picture-card"
          :on-preview="handlePictureCardPreview"
          :on-remove="handleRemove"
        >
          <i class="el-icon-plus"></i>
        </el-upload>
        <el-dialog :visible.sync="dialogVisible">
          <img width="100%" :src="dialogImageUrl" alt="" />
        </el-dialog>
      </div>

      <!-- 最低价 -->
      <div class="search flex1">
        最低价
        <el-input class="input" placeholder="" v-model="input2"> </el-input>
      </div>
      <!-- 新品 -->
      <div class="switch">
        <span>新品</span>
        <el-switch
          v-model="value"
          active-color="#409eff"
          inactive-color="#dcdfe6"
        >
        </el-switch>
      </div>
      <br />
      <!-- 显示 -->
      <div class="switch">
        <span>显示</span>
        <el-switch
          v-model="value2"
          active-color="#409eff"
          inactive-color="#dcdfe6"
        >
        </el-switch>
      </div>

      <!-- 排序 -->
      <div class="search flex1">
        <div><span class="red">*</span> 排序</div>

        <el-input class="input" placeholder="" v-model="input3"> </el-input>
      </div>
      <!-- 品牌描述 -->
      <div class="search flex1">
        <div><span class="red">*</span> 品牌描述</div>

        <el-input
          class="input text"
          type="textarea"
          :rows="2"
          placeholder="请输入内容"
          v-model="textarea"
        >
        </el-input>
      </div>
      <!-- 按钮 -->
      <span class="btn"></span>
      <el-button @click="addbrandlist" type="primary">保存</el-button>
      <el-button @click="cancel">取消</el-button>
    </div>

    <div class="flex bottom">
      <p>
        <b>Copyright © 2016-2019 </b> <span class="qdl">叩丁狼</span>. All
        rights reserved.
      </p>
      <p><b>Version</b> 1.0.0</p>
    </div>
  </div>
</template>

<script>
import { getbrandapi, getbrandstore } from "../request/httpApi";
export default {
  data() {
    return {
      input: "",
      input2: "",
      input3: null,
      dialogImageUrl: "",
      dialogVisible: false,
      value: false,
      value2: false,
      textarea: "",
      id: 0,
    };
  },
  created() {},
  methods: {
    addbrandlist() {
      getbrandapi({
        page: "1",
        // name:  ,
        size: "10",
      }).then((okk) => {
        this.id = okk.data.data[0].id + 1;
      });
      if (this.input.trim()) {
        getbrandstore({
          id: this.id,
          name: this.input,
          list_pic_url: "",
          simple_desc: this.textarea,
          pic_url: "",
          sort_order: +this.input3,
          is_show: this.value2,
          floor_price: +this.input2,
          app_list_pic_url: "",
          is_new: this.value,
          new_pic_url: "",
          new_sort_order: +this.input3,
        }).then((okk) => {
          if (okk.errno === 0) {
            this.$router.push("/brand");
          }
        });
      } else {
        alert("非空");
        // 一会加样式
      }
    },
    cancel() {
      this.$router.push("/brand");
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
  },
};
</script>


<style lang = "less" scoped>
.btn {
  margin-left: 110px;
}
.flex1 {
  display: flex;
  margin-bottom: 10px;
  width: 320px;
  justify-content: space-between;
}
.imgpr {
  padding-right: 10px;
  box-sizing: border-box;
}
.red {
  color: red;
  font-size: 8px;
}
.img {
  font-size: 12px;
}
.switch {
  font-size: 12px;

  span {
    margin-right: 85px;
  }
}
.search {
  margin: 10px 0 15px;
  font-size: 12px;
  .input {
    width: 200px;
    margin-right: 10px;
    /* height: 32px;
    line-height: 32px; */
  }
  /* .text{
      height: 200px;
  } */
}
</style>